<template>
    <div class="box">
        <h1>.sync</h1>
        <div>msg: {{ msg }}</div>

        <!-- <Child1 :msg="msg" @changeXXX="changeHandler"></Child1> -->
        <Child1 :qwer="msg" @update:qwer="changeHandler"></Child1>

        <br>

        <Child1 :qwer.sync="msg"></Child1>

        <hr>

        <hr>

        <Child2 :abc.sync="msg" @changeAbc="changeAbc"></Child2>

        <br>

        <Child2 :abc="msg" @changeAbc="msg = $event"></Child2>
        <!-- <hr> -->
        <Child2 :abc="msg" @update:abc="msg = $event"></Child2>

        <Child2 :abc.sync="msg"></Child2>
        

        
    </div>
</template>

<script>
import Child1 from './Child1.vue'
import Child2 from './Child2.vue'
export default {
    name: "SyncTest",
    components: { Child1,Child2 },
    data() {
        return {
            msg: '我爱你'
        }
    },
    methods: {
        changeHandler(text) {
            this.msg = text
        },
        changeAbc(str) {
            this.msg = str
        }
    }
}
</script>

<style scoped>

</style>